<template>
  <div class="uavDetial" style="padding: 0 20px 20px 20px">
    <div class="rightContainer">
      <div class="containerHeader">
        <el-breadcrumb separator="/" class="topBread">
          <el-breadcrumb-item>
            <img src="~@/assets/images/top_bread.png" class="topBreadIcon" />
            监控中心
          </el-breadcrumb-item>
          <el-breadcrumb-item>无人机详情</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="return_btn">
          <el-button
            class="search"
            @click="$emit('closeDraw')"
            icon="el-icon-back"
            type="text"
            size="mini"
            >返回</el-button
          >
        </div>
      </div>
      <div class="containerBody">
        <div class="bodyLeft">
          <div class="leftHeader">
            <svg-icon
              icon-class="fanhui"
              @click="$emit('closeDraw')"
              class-name="leftHeaderReturn"
            />
            <el-form label-width="90px">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="巡检任务:">
                    <span> {{ taskDetial?.taskName || "--" }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="巡检航线:">
                    <span
                      >{{ taskDetial?.currentWaylineCount || "--" }} /
                      {{ taskDetial?.waylineNum || "--" }}</span
                    >
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="当前航线:">
                    <span> {{ taskDetial?.currentWaylineName || "--" }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="巡线场景:">
                    <dict-tag
                      :options="dict.type.drone_task_type"
                      :value="taskDetial?.patrolScence"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="0">
                <el-form-item label="巡检进度:">
                  <el-progress :percentage="Number(taskDetial?.distanceCompleted)" size="mini"></el-progress>
                </el-form-item>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="泄漏隐患:">
                    <span> 0次</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="第三方施工:">
                    <span> 0次</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="leftCenter">
            <div class="video-change">
              <el-radio-group
                v-model="currentVideoName"
                size="mini"
                @input="changeVideo"
              >
                <el-radio-button
                  label="舱外"
                  v-if="videoInfo.homeOutVideoUrl"
                ></el-radio-button>
                <el-radio-button
                  label="舱内"
                  v-if="videoInfo.homeInVideoUrl"
                ></el-radio-button>
              </el-radio-group>
            </div>
            <div class="video-home-out">
              <LivePlayer
                style="
                  width: 100%;
                  height: 100%;
                  background-color: #000;
                  object-fit: cover;
                "
                ref="livePlayer"
                fluent
                autoplay
                live
                stretch
                :videoUrl="currentVideoLeftUrl"
              />
              <div></div>
              <!-- <div class="left-player-container"></div> -->
            </div>
          </div>
          <div class="lefBottom">
            <MapContainer
              :mapId="'uavMap'"
              @send-psdkData="getPsdkData"
              @getOsdData="getOsdData"
              :clickAirHome="clickAirHome"
              style="position: relative; height: 100%"
            />
          </div>
        </div>
        <div class="bodyRight">
          <div class="top-info">
            <div class="top-info-item">
              <div class="top-info-item-icon">
                <svg-icon icon-class="windSpeed" class="icon-div" />
              </div>
              <div class="top-info-item-content">
                <div class="content-title">风速</div>
                <div class="content-value">
                  {{ this.OSDData?.data?.wind_speed }} m/s
                </div>
              </div>
            </div>
            <div class="top-info-item">
              <div class="top-info-item-icon">
                <svg-icon icon-class="windDirection" class="icon-div" />
              </div>
              <div class="top-info-item-content">
                <div class="content-title">风向</div>
                <div class="content-value">
                  {{ getWindDirectionStr(this.OSDData?.data?.wind_direction) }}
                </div>
              </div>
            </div>
          </div>
          <div class="top-info-right">
            <div class="top-info-item">
              <div class="top-info-item-icon">
                <svg-icon icon-class="jiawan" class="icon-div" />
              </div>
              <div class="top-info-item-content">
                <div class="content-title">甲烷浓度</div>
                <div class="content-value" v-if="psdkData">
                  {{ psdkData?.methane_concentration }}ppm
                </div>
              </div>
            </div>
          </div>
          <div class="topVideo">
            <!-- <LivePlayer
              style="
                width: 100%;
                height: 100%;
                background-color: #000;
                object-fit: cover;
              "
              ref="livePlayer"
              fluent
              autoplay
              live
              stretch
              :controls="false"
              :videoUrl="currentVideoRight"
            /> -->
            <div class="right-player-container"></div>
          </div>
          <div class="bottom-info">
            <div class="bottom-info-item">
              <div class="bottom-info-item-icon">
                <svg-icon icon-class="flySpeed" class="icon-droneInfo" />
              </div>
              <div class="bottom-info-item-content">
                <div class="content-title">飞行速度</div>
                <div class="content-value">
                  {{ OSDData?.data?.computedSpeed || "--" }} m/s
                </div>
              </div>
            </div>
            <div class="bottom-info-item">
              <div class="bottom-info-item-icon">
                <svg-icon
                  icon-class="vertical_velocity"
                  class="icon-droneInfo"
                />
              </div>
              <div class="bottom-info-item-content">
                <div class="content-title">垂直速度</div>
                <div class="content-value">
                  {{ OSDData?.data?.vertical_speed.toFixed(2) || "--" }}m/s
                </div>
              </div>
            </div>
            <div class="bottom-info-item">
              <div class="bottom-info-item-icon">
                <svg-icon icon-class="flyHeight" class="icon-droneInfo" />
              </div>
              <div class="bottom-info-item-content">
                <div class="content-title">飞行高度</div>
                <div class="content-value" v-if="OSDData?.data?.height">
                  {{ Number(OSDData.data.elevation).toFixed(2) }} m
                </div>
                <div class="content-value" v-else>{{ "--" }} m</div>
              </div>
            </div>
            <div class="bottom-info-item-center"></div>
            <div class="bottom-info-item">
              <div class="bottom-info-item-icon">
                <svg-icon icon-class="DroneGps" class="icon-droneInfo" />
              </div>
              <div class="bottom-info-item-content">
                <div class="content-title">GPS数量</div>
                <div class="content-value">
                  {{ OSDData?.data?.position_state.gps_number || "--" }} 个
                </div>
              </div>
            </div>
            <div class="bottom-info-item">
              <div class="bottom-info-item-icon">
                <svg-icon icon-class="5GInfo" class="icon-droneInfo" />
              </div>
              <div class="bottom-info-item-content">
                <div class="content-title">RTK数量</div>
                <div class="content-value">
                  {{ OSDData?.data?.position_state.rtk_number || "--" }}个
                </div>
              </div>
            </div>
            <div class="bottom-info-item">
              <div class="bottom-info-item-icon">
                <svg-icon icon-class="startsNum" class="icon-droneInfo" />
              </div>
              <div class="bottom-info-item-content">
                <div class="content-title">激光衰减</div>
                <div class="content-value" v-if="psdkData">
                  {{ psdkData?.laser_attenuation || "--" }}%
                </div>
                <div class="content-value" v-else>
                  {{ OSDData?.data?.aiaf?.laser || "--" }}%
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import LivePlayer from "@liveqing/liveplayer";
import MapContainer from "@/views/map_box/mapView.vue";
import monitorCenterApi from "@/api/monitorCenter/index";
export default {
  name: "uavDetial",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    clickAirHome: {
      type: Object,
      default: () => {},
    },
    taskDetial: {
      type: Object,
      default: () => {},
    },
  },
  dicts: ["drone_task_type"],
  components: {
    LivePlayer,
    MapContainer,
  },
  data() {
    return {
      currentVideoName: "舱外",
      currentVideoLeftUrl:
        "http://111.34.136.157:28088/live/live/37BC036790265D9CA262CABE555AFC64.flv",
      currentVideoRight:
        "http://111.34.136.157:28088/live/live/CTTSS30224080247dji.flv",
      videoInfo: {
        homeOutVideoUrl: "http://111.34.136.157:28088/live/live/37BC036790265D9CA262CABE555AFC64.flv",
        homeInVideoUrl: false,
      },
      activeBtn: "planeCheck",
      btnList: [
        {
          label: "空域巡检",
          icon: "wurenjixunjian",
          value: "planeCheck",
        },
        {
          label: "人工巡检",
          icon: "rengongxunjian",
          value: "peopleCheck",
        },
      ],
      OSDData: null,
      psdkData: null,
      leftPlayer: null,
      rightPlayer: null,
      rightVideoUrl: null
    };
  },
  computed: {},
  watch: {
    clickAirHome: {
      handler(val) {
        if (val) {
          // this.videoInfo =
          //   typeof val.videoInfo === "object"
          //     ? val.videoInfo
          //     : JSON.parse(val.videoInfo);
          // this.currentVideoRight = this.videoInfo.droneVideo;
          // this.currentVideoLeftUrl = this.videoInfo.homeOutVideoUrl;
          let _this = this;
          this.$nextTick(() => {
            _this.getAirHomeDetail(val.id)
          })
          // this.getAirHomeDetail(val.id)
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    // this.initPlayer()
    // this.getAirHomeDetail(this.clickAirHome.id)
  },
  methods: {
    initPlayer() {
      this.leftPlayer = new SdsesPlayer({
        container: document.querySelector(".left-player-container"),
        lang: "zh",
      });
      // this.rightPlayer = new SdsesPlayer({
      //   container: document.querySelector(".right-player-container"),
      //   lang: "zh",
      // });
      this.$nextTick(() => {
        this.leftPlayer.play('ws://111.34.136.157:27117/live/e6642cfc9e6e228b165fda7655a58f47?token=82eb12e107ce448791a554c52d010a87', "preview", {
          stream: 'sstp://111.34.136.157:27117/live/e6642cfc9e6e228b165fda7655a58f47?token=82eb12e107ce448791a554c52d010a87',
        });
      });
    },
    //获取无人机机库详情
    async getAirHomeDetail(id) {
      let res = await monitorCenterApi.getAirHomeDetail(id);
      if (res.code && res.code == 200) {
        console.log("getAirHomeDetail...",res.data)
        let leftVideoUrl = res.data.droneCameraList[0].videoUrl
        this.rightVideoUrl = res.data.droneList[0].droneCameraList[0].videoUrl
        let _this = this;
        _this.rightPlayer = new SdsesPlayer({
            container: document.querySelector(".right-player-container"),
            lang: "zh",
          });
        // this.$nextTick(() => {
          // this.leftPlayer.play(leftVideoUrl.replace(/^sstp/, "ws"), "preview", {
          //   stream: leftVideoUrl,
          // });
          
          _this.rightPlayer.play(_this.rightVideoUrl.replace(/^sstp/, "ws"), "preview", {
            stream: _this.rightVideoUrl,
          });
          // _this.rightPlayer.resize()
        // });
      }
    },
    //根据风向角度计算风向
    getWindDirectionStr(wd) {
      var wdStr = "";
      if (!(wd !== "" && wd !== undefined && wd !== null)) {
        wdStr = "--";
        return wdStr;
      }
      var value = parseFloat(wd).toFixed(1);
      if (value <= 22.5 || value > 337.5) {
        wdStr = "北风";
      } else if (value > 22.5 && value <= 67.5) {
        wdStr = "东北风";
      } else if (value > 67.5 && value <= 112.5) {
        wdStr = "东风";
      } else if (value > 112.5 && value <= 157.5) {
        wdStr = "东南风";
      } else if (value > 157.5 && value <= 202.5) {
        wdStr = "南风";
      } else if (value > 202.5 && value <= 247.5) {
        wdStr = "西南风";
      } else if (value > 247.5 && value <= 292.5) {
        wdStr = "西风";
      } else if (value > 292.5 && value <= 337.5) {
        wdStr = "西北风";
      }
      return wdStr;
    },
    getOsdData(data) {
      this.OSDData = data;
      console.log("OSDData :>> ", data);
      if (this.OSDData.data.horizontal_speed) {
        let speed = this.computedUavV();
        this.OSDData.data.computedSpeed = speed;
      }
    },
    getPsdkData(data) {
      this.psdkData = data;
      this.psdkData.methane_concentration = Number(
        data.methane_concentration * 0.1
      ).toFixed(0);
      console.log("psdkData :>> ", data);
    },
    //计算无人机速度
    computedUavV() {
      let speed = this.computedSpeed(
        Number(this.OSDData.data.horizontal_speed),
        Number(this.OSDData.data.vertical_speed)
      );
      console.log("speed :>> ", speed);
      return speed;
    },
    //根据水平速度和垂直速度计算
    computedSpeed(horizontal_speed, vertical_speed) {
      let speed = Math.sqrt(
        horizontal_speed * horizontal_speed + vertical_speed * vertical_speed
      );
      return speed.toFixed(2);
    },
    changeVideo(type) {
      this.currentVideoLeftUrl =
        type == "舱内"
          ? this.videoInfo.homeInVideoUrl
          : this.videoInfo.homeOutVideoUrl;
    },
    clickLeftBtn(item) {
      this.activeBtn = item.value;
    },
  },
  destroyed() {},
  beforeDestroy() {},
};
</script>
<style lang="scss" scoped>
.uavDetial {
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;
  background: rgba(8, 22, 54, 1);
  z-index: 100;
  font-family: Alibaba PuHuiTi;
}
.itemUavDetial {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 5px;
  background: rgba(9, 32, 87, 0.7);
  border: 1px solid transparent;

  &:hover {
    // opacity: 0.8;
    transform: scale(1.1);
  }
}
.left-bar-item {
  cursor: pointer;
  position: relative;
  width: 70px;
  height: 70px;
  // background: rgba(9, 32, 87, 0.7);
  background: url("~@/assets/images/bigScreen/btn_border.png") no-repeat;
  background-size: contain;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 10px;
  align-items: center;

  .left-bar-item__icon {
    width: 20px;
    height: 20px;
    margin-bottom: 2px;
  }

  .left-bar-item__text {
    font-size: 16px;
    transform: scale(0.6);
    white-space: nowrap;
    color: #fff;
  }
  .left-bar-item__activeText {
    font-size: 16px;
    font-weight: 800;
    transform: scale(0.8);
    white-space: nowrap;
    color: #fff;
  }
}
.rightContainer {
  flex: 20;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.containerHeader {
  flex: 1;
  margin-left: 15px;
  width: 100%;
  align-content: center;
  .topBread {
    font-family: PangMenZhengDao;
    font-size: 20px;
    color: #90c0ee;
    height: 100%;
    line-height: 2;
    .topBreadIcon {
      width: 30px;
      height: 30px;
    }
  }
  .topBreadIcon {
    width: 30px;
    height: 30px;
  }
  .return_btn {
    position: absolute;
    right: 0.3rem;
    top: 0.09rem;
  }
  .search {
    width: 68px;
    height: 30px;
    color: #fff;
    background: linear-gradient(
      180deg,
      rgba(25, 131, 255, 0.35) 0%,
      #168fff 100%
    );
    border-radius: 4px 4px 4px 4px;
  }
}
::v-deep .el-breadcrumb__inner {
  color: #90c0ee;
}
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: #fff;
}
.containerBody {
  flex: 20;
  display: flex;
  flex-direction: row;
  margin-left: 10px;
  color: #fff;
}
.bodyLeft {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 10rem;
  .leftHeader {
    // flex: 1;
    width: 6rem;
    height: 2.1rem;
    background: rgba(0, 34, 96, 0.6);
    box-shadow: inset 0px 0px 24px 0px rgba(0, 101, 255, 0.5),
      0px 4px 14px 0px rgba(0, 15, 59, 0.6);
    border-radius: 10px 10px 10px 10px;
    padding: 10px 0 10px 0;
    .leftHeaderReturn {
      position: absolute;
      left: 6rem;
      width: 20px;
      height: 20px;
      cursor: pointer;
      z-index: 99;
    }
    .leftHeaderReturn:hover {
      scale: 1.2;
    }
  }
  .leftCenter {
    // flex: 2;
    position: relative;
    top: 0.1rem;
    width: 6rem;
    height: 3.6rem;
    background: rgba(0, 34, 96, 0.6);
    box-shadow: inset 0px 0px 24px 0px rgba(0, 101, 255, 0.5),
      0px 4px 14px 0px rgba(0, 15, 59, 0.6);
    border-radius: 10px 10px 10px 10px;
    padding: 10px 0 10px 0;
    .video-change {
      position: absolute;
      top: 0.3rem;
      z-index: 9;
      left: 0.2rem;
    }
    .video-home-out {
      padding: 0.1rem;
      /* border: 1px solid #fff; */
      height: 98%;
      .left-player-container{
        width: 100%;
        height: 100%;
        background-color: #000;
        object-fit: cover;
      }
    }
  }
  .lefBottom {
    width: 6rem;
    height: 4.1rem;
    background: rgba(0, 34, 96, 0.6);
    box-shadow: inset 0px 0px 24px 0px rgba(0, 101, 255, 0.5),
      0px 4px 14px 0px rgba(0, 15, 59, 0.6);
    border-radius: 10px 10px 10px 10px;
    position: relative;
    top: 0.2rem;
    padding: 0.15rem 0.1rem;
  }
}
.bodyRight {
  flex: 3;
  margin-left: 10px;
  height: 10rem;
  background: rgba(0, 34, 96, 0.6);
  box-shadow: inset 0px 0px 24px 0px rgba(0, 101, 255, 0.5),
    0px 4px 14px 0px rgba(0, 15, 59, 0.6);
  border-radius: 10px 10px 10px 10px;
  // height: 95%;
  .topVideo {
    position: relative;
    top: 0.1rem;
    height: 98%;
    padding: 0.1rem;
    .right-player-container{
      width: 100%;
      height: 100%;
      background-color: #000;
      object-fit: cover;
      .__player_canvas{
        height: 100%;
      }
    }
  }
  .top-info-right {
    right: 0.3rem;
    position: absolute;
    top: 0.9rem;
    float: right;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 99;
    margin-right: 20px;
    width: 3rem;
    height: 0.9rem;
    background: rgba(8, 22, 54, 0.5);
    padding: 10px;
    .top-info-item {
      width: 200px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      .top-info-item-icon {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .icon-div {
        width: 60px;
        height: 60px;
      }
      .top-info-item-content {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }
  .top-info {
    position: absolute;
    top: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 99;
    margin-left: 0.4rem;
    width: 4rem;
    height: 0.9rem;
    background: rgba(8, 22, 54, 0.5);
    padding: 10px;
    .top-info-item {
      width: 100px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      .top-info-item-icon {
        width: 50px;
        height: 50px;
        border: 1px solid;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .icon-div {
        width: 30px;
        height: 30px;
      }
      .top-info-item-content {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }
  .bottom-info {
    position: relative;
    top: -0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .bottom-info-item-center {
      width: 150px;
    }
    .bottom-info-item {
      width: 150px;
      height: 57px;
      //   background: linear-gradient(135deg, #bdc3c7, #2c3e50);
      background: rgba(8, 22, 54, 0.5);
      border: none;
      border-radius: 32px;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      display: flex;
      flex-direction: row;
      align-items: center;
      .bottom-info-item-icon {
        border-width: 0px;
        background: url("../../../assets/images/darkCircle.svg") no-repeat;
        width: 50px;
        height: 50px;
        flex: 2;
        .icon-droneInfo {
          position: relative;
          width: 40px;
          height: 40px;
          left: 5px;
          top: 4px;
        }
      }
      .bottom-info-item-content {
        flex: 3;
      }
    }
  }
}
::v-deep .el-form-item__label {
  color: #fff;
}
::v-deep .el-progress {
  top: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
::v-deep .el-form-item {
  margin-bottom: 1px;
}
::v-deep .el-form-item__content {
  font-size: 12px;
}
::v-deep .el-progress-bar__outer {
  background: rgba(0, 34, 96, 0.6);
  box-shadow: inset 0px 0px 24px 0px rgba(0, 101, 255, 0.5),
    0px 4px 14px 0px rgba(0, 15, 59, 0.6);
  border-radius: 10px 10px 10px 10px;
}
::v-deep .el-progress__text {
  color: #39a2ff;
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
}
::v-deep .el-form-item__label {
  font-family: Alibaba PuHuiTi;
  color: #9fc2fa;
}
</style>
    